<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷炫的横幅</title>
    <style>
        body {
            background: #000 url(https://www.groove.omg.lol/stars.gif);
            color: lightgoldenrodyellow;
        }

        header {
            --tomorrow: 3s;
            position: relative;
            font-size: 5rem;
            padding: 1.5em 0 1em;
            width: min(10ch, 100dvw);
            margin: 0 auto;
            perspective: 1000px;
            color: yellow;
        }

        header h1 {
            position: relative;
            font-size: .15em;
            /* effectively letter-spacing */
            text-align: center;
            font-style: italic;
            animation: get-orbited var(--tomorrow) infinite;
            white-space: nowrap;
        }

        @media (max-width: 410px) {
            header h1 {
                white-space: collapse;
            }
        }

        @keyframes get-orbited {

            from,
            50% {
                z-index: 0;
            }

            51%,
            to {
                z-index: 1;
            }
        }

        header h1 span {
            display: inline-block;
            font-size: 5rem;
            white-space: pre;
            animation:
                letter calc(var(--tomorrow) / 5) calc(-2s + var(--i) * 100ms) ease-in-out infinite;
        }

        @keyframes letter {
            50% {
                scale: 1.5;
            }
        }

        header p {
            --angle: calc(sin((var(--milliseconds, 0) - 500) / 666) * 30deg);
            --background-hue: calc(var(--seconds, 0) * 90deg + 60deg);
            position: absolute;
            top: 50%;
            left: 50%;
            transform:
                rotate(var(--angle)) translate(-50%, -700%);
            transform-origin: 0 50%;
            transform-style: preserve-3d;
            font-size: .3em;
            padding: 0 .1em;
            white-space: pre;
            color: black;
            font-family: monospace;
            background: hsl(var(--background-hue), 100%, 50%);
            animation:
                orbit var(--tomorrow) ease-in-out infinite,
                get-under var(--tomorrow) ease-in-out infinite;
        }

        @keyframes orbit {
            50% {
                transform:
                    rotate(var(--angle)) translate(-50%, 500%);
            }
        }

        @keyframes get-under {

            from,
            40%,
            to {
                opacity: 1;
                scale: 1;
            }

            66% {
                opacity: .8;
                scale: .9;
                rotate: x 50deg;
            }
        }

       
    </style>
</head>

<body>
    <header>
        <h1>
            <span style="--i: 0">L</span>
            <span style="--i: 1">e</span>
            <span style="--i: 2">t</span>
            <span style="--i: 3">&rsquo;</span>
            <span style="--i: 4">s</span>
            <span style="--i: 5"> </span>
            <span style="--i: 6">m</span>
            <span style="--i: 7">a</span>
            <span style="--i: 8">k</span>
            <span style="--i: 9">e</span>
            <br>
            <span style="--i: 10">b</span>
            <span style="--i: 11">a</span>
            <span style="--i: 12">n</span>
            <span style="--i: 13">n</span>
            <span style="--i: 14">e</span>
            <span style="--i: 15">r</span>
            <span style="--i: 16">s</span>
            <span style="--i: 17">!</span>
        </h1>
        <p>明天会有更多的精彩内容</p>
    </header>

 
</body>

</html>